<template>
	<div class="wrap">
		<div class="essential-box">
			<div class="essential-box">
				<el-row :gutter="20">
					<el-col :span="12" v-if="shopInfo.contract_info">
						<div class="grid-content">
							<div class="key">合同状态：</div>
							<div class="val">
								<span class="text-success" v-if="shopInfo.contract_info.status == 20">已签约</span>
								<span class="text-danger" v-else>未签约</span>
							</div>
							<el-button
								class="sign-audit-btn"
								type="danger"
								size="mini"
								v-if="jurisdiction.contractAudit == 1"
								round
								@click="audit()"
								>合同审核</el-button
							>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content pl_20">
							<el-link type="primary" @click="signEdit" v-if="!signSaveShow && jurisdiction.contractInfo == 1"
								>编辑</el-link
							>
						</div>
					</el-col>
					<el-col :span="24" v-if="shopInfo.contract_info && shopInfo.contract_info.status == 10">
						<div class="grid-content height-auto">
							<div class="key">备注：</div>
							<div class="val" style="max-width: 80%;">
								{{ shopInfo.contract_info.remark }}
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">签约方式：</div>
							<div class="val">
								<el-select v-model="sign.sign_type" :disabled="signInDisabled">
									<el-option v-for="item in signOptions" :key="item.value" :label="item.name" :value="item.value">
									</el-option>
								</el-select>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">审核人：</div>
							<div class="val" v-if="shopInfo.contract_info">{{ shopInfo.contract_info.audit_name }}</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">审核时间：</div>
							<div class="val" v-if="shopInfo.contract_info">{{ shopInfo.contract_info.audit_time }}</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">签约人：</div>
							<div class="val">
								<el-input v-model="sign.contact" :disabled="signInDisabled"></el-input>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">签约人手机号：</div>
							<div class="val">
								<el-input v-model="sign.contact_phone" :disabled="signInDisabled"></el-input>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">签约时间：</div>
							<div class="val" v-if="shopInfo.contract_info">{{ shopInfo.contract_info.sign_time }}</div>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="grid-content">
							<div class="key">签约人身份证号：</div>
							<div class="val">
								<el-input v-model="sign.identity_card" :disabled="signInDisabled"></el-input>
							</div>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="grid-content height-auto">
							<div class="key">合同：</div>
							<div class="val">
								<uploadbig
									:pic_name="'shopInfo.agreement'"
									:again="true"
									:url="sign.agreement"
									@func="signAgreement"
								></uploadbig>
								<el-link
									class="ml_20"
									type="primary"
									v-if="shopInfo.agreement"
									@click="downLoadAgreement(head_url + sign.agreement)"
									>下载</el-link
								>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content">
							<div class="key">合同开始日期：</div>
							<div class="val">
								<el-date-picker
									:disabled="signDisabled"
									type="date"
									value-format="yyyy-MM-dd"
									v-model="sign.date_start"
								></el-date-picker>
							</div>
						</div>
					</el-col>
					<el-col :span="16">
						<div class="grid-content">
							<div class="key">合同终止日期：</div>
							<div class="val">
								<el-date-picker
									:disabled="signDisabled"
									type="date"
									value-format="yyyy-MM-dd"
									v-model="sign.date_end"
								></el-date-picker>
							</div>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="grid-content">
							<div class="key">代理商：</div>
							<div class="val">
								<el-select v-model="sign.agent_id" :disabled="signDisabled" placeholder="签约方式">
									<el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
								</el-select>
							</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="signSaveShow">
						<div class="edit-btn">
							<el-button round @click="signEditBack()">返回</el-button>
							<el-button type="primary" round @click="signSave()">保存</el-button>
						</div>
					</el-col>
				</el-row>
				<div class="shop-footer border-top">
					<el-row :gutter="20">
						<el-col :span="24">
							<div class="grid-content">
								<div class="key">公司名称：</div>
								<div class="val">
									<span>{{ shopInfo.company_name }}</span>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="grid-content">
								<div class="key">营业执照注册号：</div>
								<div class="val">
									<span>{{ shopInfo.registration_no }}</span>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="grid-content height-auto">
								<div class="key">营业执照：</div>
								<div class="val" v-if="shopInfo.business_license">
									<el-image
										@click="changeImg(shopInfo.business_license)"
										style="width: 100px; height: 100px; margin-right: 10px;"
										:src="shopInfo.business_license"
										:preview-src-list="srcMaxList"
									>
									</el-image>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="grid-content height-auto">
								<div class="key">经营许可证：</div>
								<div class="val">
									<el-image
										v-for="item in shopInfo.others"
										:key="item"
										style="width: 100px; height: 100px; margin-right: 10px;"
										:src="item"
										:preview-src-list="srcMaxList"
										@click="changeImg(item)"
									>
									</el-image>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
		<!-- 审核状态-弹框 -->
		<el-dialog
			:title="'合同审核'"
			:visible.sync="shopContractShow"
			width="500px"
			:close-on-click-modal="false"
			:before-close="hiddenDialog"
		>
			<div class="auditCentent">
				<div class="audit-dialog">
					<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>审核结果</div>
					<div class="val">
						<el-radio v-model="contractInfo.sign_status" label="20">签约成功</el-radio>
						<el-radio v-model="contractInfo.sign_status" label="10">签约失败</el-radio>
					</div>
				</div>

				<div class="audit-dialog" v-if="contractInfo.sign_status == 10">
					<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>备注</div>
					<div class="val">
						<el-input
							type="textarea"
							:rows="4"
							:cols="32"
							maxlength="150"
							show-word-limit
							v-model="contractInfo.remark"
						></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="shopAuditSave()">确 定</span>
				<span class="resetBtn" @click="hiddenDialog">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// 用工设置组件
import { contractAuditEdit, setContractInfo } from '@/api/shop.js'
import { searchAgentList } from '@/api/agent.js'
const common = require('../../../static/tool.js')
import { cloneDeep } from 'lodash'

export default {
	name: 'useSignSetting',
	props: {
		shop_sn: {
			type: String,
			required: true
		},
		shop_info: {
			type: Object,
			required: true
		},
		jurisdiction: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			head_url: common.head_url,
			shopContractShow: false,
			shopInfo: {},
			contractInfo: {
				sign_status: '',
				remark: ''
			},
			srcMaxList: [], //照片放大
			// 	签约信息
			agentList: [],
			sign: {
				sign_type: '',
				contact: '',
				contact_phone: '',
				identity_card: '',
				agreement: '',
				date_start: '',
				date_end: '',
				agent_id: ''
			},
			signOptions: [
				{ name: '个人签约', value: 1 },
				{ name: '企业签约', value: 2 }
			],
			signDisabled: true, //编辑 未签约/签约后都可编辑
			signInDisabled: true, //只有未签约可以编辑
			signSaveShow: false //显示编辑
		}
	},
	async mounted() {
		this.setValue()
		await this.getAgentList() //获取代理商
	},
	watch: {
		shop_info() {
			this.setValue()
		}
	},
	methods: {
		setValue() {
			this.shopInfo = this.shop_info
			if (!this.shopInfo.business_license.match(RegExp(/http/))) {
				this.shopInfo.business_license = this.head_url + this.shopInfo.business_license
			}

			for (let i = 0; i < this.shopInfo.others.length; i++) {
				this.shopInfo.others[i] = this.head_url + this.shopInfo.others[i]
			}

			this.sign.sign_type = +this.shopInfo.contract_info.sign_type
			this.sign.contact = this.shopInfo.contact
			this.sign.contact_phone = this.shopInfo.contact_phone
			this.sign.identity_card = this.shopInfo.sign_info.identity_card
			this.sign.agreement = this.shopInfo.agreement
			this.sign.date_start = this.shopInfo.sign_info.date_start
			this.sign.date_end = this.shopInfo.sign_info.date_end
			this.sign.agent_id = +this.shopInfo.agent_id
			this.contractInfo.sign_status = this.shopInfo.contract_info.status.toString()
		},
		// 图片显示
		changeImg(ev) {
			this.srcMaxList = []
			this.srcMaxList.push(ev)
		},

		audit() {
			this.shopContractShow = true
		},
		// 店铺审核保存
		async shopAuditSave() {
			try {
				if (![10, 20].includes(+this.contractInfo.sign_status)) {
					return this.$message.error('请选择合同审核结果')
				}

				await contractAuditEdit({
					shop_sn: this.shopInfo.shop_sn,
					status: this.contractInfo.sign_status,
					remark: this.contractInfo.remark
				})
				this.hiddenDialog()
				this.signEditBack('save')
				this.$emit('regainClick', '获取详情')
			} catch (err) {
				console.log(err)
			}
		},
		//隐藏弹框
		hiddenDialog() {
			this.shopContractShow = false
		},
		// 签约编辑
		signEdit() {
			this.signDisabled = false
			this.signSaveShow = true
			if (this.shopInfo.contract_info && this.shopInfo.contract_info.status == 10) {
				this.signInDisabled = false
			}
			this.signBak = cloneDeep(this.sign)
			this.shopInfoBak = cloneDeep(this.shopInfo)
		},

		// 下载合同
		downLoadAgreement(href) {
			window.open(href + '?response-content-type=application/octet-stream')
		},
		//上传合同
		signAgreement(data) {
			this.signEdit()
			this.sign.agreement = data
		},
		// 签约信息保存
		async signSave() {
			try {
				await setContractInfo({
					shop_sn: this.shop_sn,
					...this.sign
				})
				this.$message.success('保存成功')
				this.signEditBack('save')
				this.$emit('regainClick', '获取详情')
			} catch (err) {
				console.log(err)
			}
		},

		/*
		 * 取消编辑
		 * type true  保存过的不需要拷贝值回显示
		 */

		signEditBack(type) {
			this.signDisabled = true
			this.signInDisabled = true
			this.signSaveShow = false
			if (!type) {
				this.shopInfo = this.shopInfoBak
				this.sign = this.signBak
			}
			this.$forceUpdate()
		},

		async getAgentList() {
			try {
				let ret = await searchAgentList({ status: 1 })
				this.agentList = ret.list.map(it => {
					return {
						id: +it.id,
						name: it.name
					}
				})
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped lang="scss">
.essential-box {
	margin-bottom: 30px;
}
.essential-box .grid-content {
	display: flex;
	height: auto;
	padding: 10px 0;
	height: 30px;
	line-height: 30px;
}
.essential-box .grid-content .key {
	width: 110px;
	font-size: 13px;
	color: #999999;
	text-align: right;
}
.essential-box .grid-content .val {
	font-size: 14px;
	padding-left: 20px;
	color: #222222;
}
.sign-audit-btn {
	margin-left: 20px;
	font-size: 12px;
	padding: 3px 10px;
}
.audit-dialog {
	display: flex;
	padding-bottom: 20px;
}
.audit-dialog .key {
	width: 100px;
	color: #999999;
}
.pl_20 {
	padding-left: 10px;
}
.shop-footer {
	margin-top: 20px;
	padding-top: 20px;
}
.height-auto {
	height: auto !important;
}
.height-auto .val {
	display: flex;
}
.edit-btn {
	text-align: center;
	margin-top: 20px;
}
.ml_20 {
	margin-left: 20px;
}

.el-row {
	padding-bottom: 50px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/UseSignSetting.vue